<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('newcrumbs.crumbsEle')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('newcrumbs.crumbsTwe')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('rule.no23')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <div class="list_operation" v-if="$store.state.common.permiss.userRiskList.includes('add')">
      <el-button 
        type="primary" 
        @click="showAdd(1)">
        {{$t('rule.no24')}}
      </el-button>
    </div>

    <!-- -------------表单显示栏------------------------ -->
    <div class="table" >
      <template>
        <el-table :data="tableData" size="small" >
          <el-table-column align="center" prop="levelType" :label="$t('rule.no25')">
          </el-table-column>
          <el-table-column align="center" prop="ruleSetName" :label="$t('rule.no26')">
            <template slot-scope="scope">
              <p>{{$t('operatorManage.no14')+':'+scope.row.refundCountStart+'&lt; value≤'+scope.row.refundCountEnd}}</p>
              <p>{{$t('operatorManage.no15')+':'+scope.row.overdueStart+'&lt; value≤'+scope.row.overdueEnd}}</p>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="operation" label="操作" min-width="160">
            <template slot-scope="scope">
              <span 
                v-if="$store.state.common.permiss.userRiskList.includes('edit')"
                class="table_opr"
                @click="showAdd(2,scope.row)">
                {{$t('public.no51')}}
              </span>
              <span 
                v-if="$store.state.common.permiss.userRiskList.includes('del')"
                class="table_opr"
                @click="showDel(scope.row.id,scope.row.levelType)">
                {{$t('idManage.del')}}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    
    <el-dialog :title="$t('rule.no28')" :visible.sync="addOrChangeFlag" width="560" top="20vh">
      <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="130px">
        <el-form-item :label="$t('rule.no27')">
          <el-input v-model="ruleForm.levelType"></el-input>
        </el-form-item>
        <el-form-item :label="$t('rule.no53')">
          <el-radio-group v-model="ruleForm.userType">
            <el-radio :label="1">{{$t('add.no83')}}</el-radio>
            <el-radio :label="2">{{$t('add.no84')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('operatorManage.no14')">
          <el-input v-model="ruleForm.refundCountStart" style="width:100px"></el-input>
          <span> &lt; value ≤ </span>
          <el-input v-model="ruleForm.refundCountEnd" style="width:100px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('operatorManage.no15')">
          <el-input v-model="ruleForm.overdueStart" style="width:100px"></el-input>
          <span> &lt; value ≤ </span>
          <el-input v-model="ruleForm.overdueEnd" style="width:100px"></el-input>
        </el-form-item>
      </el-form>
      <div class="button flex flex-justify-center">
        <el-button type="primary" @click="submit">{{$t('public.no49')}}</el-button>
        <el-button type="primary" @click="addOrChangeClose">{{$t('public.no50')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="$t('idManage.del')" :visible.sync="deleteFlag" width="560">
      <h4 class="mb20">{{$t('operatorManage.no20')}} {{levelType}}?</h4>
      <div class="button">
        <el-button type="primary" @click="delSure">{{$t('public.no49')}}</el-button>
        <el-button type="primary" @click="deleteFlag = false">{{$t('public.no50')}}</el-button>
      </div>
    </el-dialog>

    <div class="foot"></div>

  </div>
</template>

<script>
export default {
  name: 'userRiskList',
  data () {
    return {
      tableData: [],
      ruleForm: {
        id: '',
        overdueEnd: '',
        overdueStart: '',
        refundCountEnd: '',
        refundCountStart: '',
        levelType: '',
        userType: '',
      },
      delId: '',
      levelType: '',
      deleteFlag: false,
      addOrChangeFlag: false,
      addOrChange: '',

    }
  },
  methods: {
    getTableData () { // 获取列表数据
      let option = {
        param:{}
      }
      this.$axios.post(this.$action.risk_level_set,option).then(res=>{
        if(res.code==200){
          this.tableData = res.data;
        }
      })
    },
    submit(){
      let httpUrl = this.$action.risk_level_creation;
      let option = {
        param: {
          ...this.ruleForm
        },
      }
      if(this.addOrChange==2){
        httpUrl = this.$action.risk_level_modification
      }
      this.$axios.post(httpUrl,option).then(res=>{
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
          this.getTableData()
          this.addOrChangeClose()
        } else {
          this.$globalMsg.error(res.message)
        }
      })
    },
    showAdd(type,row){
      this.addOrChange = type
      if(row){
        this.ruleForm.id = row.id
        this.ruleForm.overdueEnd = row.overdueEnd
        this.ruleForm.overdueStart = row.overdueStart
        this.ruleForm.refundCountEnd = row.refundCountEnd
        this.ruleForm.refundCountStart = row.refundCountStart
        this.ruleForm.levelType = row.levelType
        this.ruleForm.userType = row.userType
      }
      this.addOrChangeFlag = true
    },
    addOrChangeClose(){
      this.addOrChangeFlag = false
      this.addOrChange = ''
      this.ruleForm.id = ''
      this.ruleForm.overdueEnd = ''
      this.ruleForm.overdueStart = ''
      this.ruleForm.refundCountEnd = ''
      this.ruleForm.refundCountStart = ''
      this.ruleForm.levelType = ''
      this.ruleForm.userType = ''
    },
    showDel(id,levelType){
      this.delId = id
      this.levelType = levelType
      this.deleteFlag = true
    },
    delSure(){
      let option = {
        param: {
          id:this.delId
        },
      }
      this.$axios.post(this.$action.risk_level_remove,option).then(res=>{
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
          this.getTableData()
        } else {
          this.$globalMsg.error(res.message)
        }
        this.deleteFlag = false
      })
    }
  },
  watch: {
    addOrChangeFlag(val){
      if(!val){
        this.addOrChangeClose()
      }
    }
  },
  mounted () {
    this.getTableData();
  }
}
</script>

<style scoped lang="scss">

</style>
